<template>
  <div class="drawer" :class="value ? 'show' : ''" @click.stop.self="close">
    <div class="content" :style="Style">
      <div class="user" @click="handleUser">
        <div class="avatar"
             v-if="user.avatar"
             :style="{backgroundImage: `url(${user.avatar})`}" />
        <div class="name" v-text="user.name || '请登录'" />
        <div class="arrow" v-if="user.userId">
          <icon-svg icon-class="arrow" />
        </div>
      </div>

      <group title="其他">
        <group-item icon="pifu" text="个性主题" @click.native="navigation('/themes')" arrow />
        <group-item icon="bianjigedanxinxi" text="图标列表" @click.native="navigation('/icon-list')" arrow />
        <group-item icon="pifu" text="测试" @click.native="navigation('/test')" arrow />
        <group-item icon="xiazai" text="下载" @click.native="navigation('/download')" arrow />
        <group-item icon="singer" text="调试">
          <bk-switch v-model="debug" style="margin-right: 8px" size="16" />
        </group-item>
      </group>

      <div class="logout" v-if="user.userId" @click="logout">退出登录</div>
    </div>
  </div>
</template>

<script>
import BkSwitch from 'components/bk-switch'
import { WatchBack } from 'common/js/mixins'
import group from './group'
import groupItem from './group-item'

export default {
  name: 'drawer',
  mixins: [ WatchBack ],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '75%'
    }
  },
  methods: {
    close () {
      this.removeHistory()
      this.$emit('input', false)
    },
    logout () {
      this.$store.dispatch('user/Logout')
      this.navigation({
        path: '/login',
        query: {
          redirect: this.$route.fullPath
        }
      })
    },
    handleUser () {
      this.$emit('input', false)
      if (this.user.userId) {
        this.$router.push('/user')
      } else {
        this.$router.push({
          path: '/login',
          query: {
            redirect: this.$route.fullPath
          }
        })
      }
    },

    navigation (navigation) {
      this.$emit('input', false)
      this.$router.replace(navigation)
    },
    onBrowserBack (e) {
      if (this.value) {
        this.$emit('input', false)
      }
    }
  },
  watch: {
    value (value) {
      if (value) this.addHistory()
    }
  },
  computed: {
    Style () {
      return {
        width: typeof (this.width) === 'number' ? `${this.width}px` : this.width,
        paddingTop: this.$store.state.StatusBarHeight + 'px'
      }
    },
    user () {
      return this.$store.state.user
    },
    debug: {
      get () {
        return this.$store.state.debug
      },
      set (value) {
        this.$store.dispatch('setDebug', value)
      }
    }
  },
  components: { group, groupItem, BkSwitch }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    opacity: 0;
    z-index: 200;
    transition: all .3s ease-in-out 0s;
    pointer-events: none;
    >.content {
      height: 100%;
      position: relative;
      background: @color-background;
      transition: transform .3s;
      transform: translateX(-100%);
      .user {
        height: 44px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        color: @color-text;
        font-size: @font-size-large;
        .avatar {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .name { padding: 0 12px }
        .arrow {
          svg {
            font-size: @font-size-medium;
            transform: rotate(270deg);
          }
        }
      }
      .logout {
        margin: 0 18px 18px;
        padding: 12px 0;
        background: @color-base;
        color: red;
        border-radius: 8px;
      }
    }
  }
  .drawer.show {
    opacity: 1;
    pointer-events: auto;
    >.content {
      transform: translateX(0);
    }
  }

</style>
